<script setup lang='ts'>
import * as echarts from 'echarts';
import { ref,onMounted,watch } from 'vue';

// 获取 dom 实例
const target = ref(null)
// echarts 实例变量
let myChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart()
})

const renderChart = () =>{
  const option = {
  radar: { // 坐标系配置
    axisName:{ // 标签配置
      color:'#05D5FF',
      fontSize: 14
    },
    shape: 'polygon', // 雷达图最外层形状
    center:['50%','50%'], // 坐标中心位置
    radius: '80%', // 坐标半径
    startAngle: 120, //坐标起始角度
    axisLine:{ // 坐标轴轴线相关设置
      lineStyle:{
        color: 'rgba(5,213,255,.8)'
      }
    },
    splitLine:{ // 坐标轴在 grid 区域中的分隔线
      show: true,
      lineStyle:{
        width: 1,
        color: 'rgba(5,213,255.8)'
      }
    },
    indicator: props.data.risks.map(item=>({  // 指示器
      name: item.name,
      max: 100
    })),
			splitArea: { // 不展示拆分区域
				show: false
			}
  },
  polar:{ // 坐标极点
    center:['50%','50%'], // 坐标中心位置
    radius: '0%', // 坐标半径
  },
  angleAxis:{ // 坐标角度
    min: 0, // 坐标轴刻度最小值
    interval: 5, // 坐标轴刻度间隔
    clockwise: false, // 坐标轴刻度是否顺时针
    axisTick: { // 不显示坐标轴刻度
			show: false
		},
    axisLabel: { // 不显示坐标轴文字
			show: false
		},
    axisLine: { // 不显示坐标轴线
			show: false 
		},
    splitLine: { // 不显示分割线
			show: false
		}
  },
  radiusAxis:{ // 径向轴
    min: 0, // 坐标轴刻度最小值
    interval: 20, // 坐标轴刻度间隔
  },
  series: {
      type: 'radar', // 图表类型
      symbol: 'circle', // 数据点标记的图形
      symbolSize: 10, // 数据点标记的大小
      areaStyle: { // 区域填充样式
        color: '05D5FF',
        opacity: 0.5
      },
      lineStyle: { // 线条样式
        color: '#05D5FF',
        width: 2
      },
      itemStyle: { // 数据点样式
        color: '#05D5FF'
      },
      label: { // 数据标签
        show: true,
        color: '#fff',
      },
      data: [
        {
          value: props.data.risks.map(item=>item.value),
        },
      ],
    }
};

  myChart.setOption(option);
}

const props = defineProps({
  data:{
    type: Object,
    required: true
  }
})

watch(()=>props.data,()=>{
  renderChart()
})



</script>

<template>
  <div>
    <div>【云端报警风险】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>

</template>

<style scoped>

</style>